<template>
  <div>
    <editor
      :initialValue="editorText"
      height="500px"
      initialEditType="markdown"
      previewStyle="vertical"
      ref="tuiEditor"
    />
    <div>
      <button @click='getHtml'>查看</button>
      <button @click='putHtml'>上传</button>
    </div>
  </div>
</template>
<script>
import "codemirror/lib/codemirror.css";
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/vue-editor";

export default {
  components: {
    editor: Editor
  },
  data: () => ({
    editorText: ""
  }),
  methods: {
    getHtml() {
      let html = this.$refs.tuiEditor.invoke('getHtml')
      console.log(html)
    },
    async putHtml() {
      let html = this.$refs.tuiEditor.invoke('getHtml')
      await this.$http.puthtml({ 'html': html })
      
    }
  },
}
</script>
<style lang="scss" scoped>
</style>